import { Suspense } from "react";
import { TaskList } from "~/components/tasks/TaskList";
import { Card } from "antd";
import { ErrorBoundary } from "~/components/common/ErrorBoundary";
import { Loading } from "~/components/common/Loading";
import { createServerClient } from "~/trpc/server-client";
import { notFound } from "next/navigation";
import type { CoursePageParams } from "~/types/route";

interface Props {
  params: CoursePageParams;
}

async function CourseInfo({ courseId }: { courseId: string }) {
  const trpc = await createServerClient();
  const course = await trpc.courses.getById.fetch({ 
    courseId 
  });
  
  if (!course) {
    notFound();
  }
  
  return (
    <Card className="mb-4">
      <h1 className="text-2xl font-bold mb-2">{course.title}</h1>
      <p className="text-gray-500">{course.description}</p>
    </Card>
  );
}

export default async function TasksPage({ params: { courseId } }: Props) {
  return (
    <div className="p-6">
      <ErrorBoundary>
        <Suspense fallback={<Loading />}>
          <CourseInfo courseId={courseId} />
        </Suspense>
      </ErrorBoundary>
      <TaskList courseId={courseId} />
    </div>
  );
} 